<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="card-header">
        <span class="title">验收标准管理</span>
        <div class="btn-wrap">
          <span v-if="isAudit">
            <el-button
              size="middle"
              type="text"
              :loading="passLoading"
              @click="handleApproved"
              >审核通过</el-button
            >
            <el-divider direction="vertical"></el-divider>
            <el-button size="middle" type="text" @click="handleRejected"
              >审核驳回</el-button
            >
          </span>
        </div>
      </div>
      <div>
        <Umy-table
          :loading="tableLoading"
          :data-source="baseTableData"
          :columns="tableColumns"
          :isShowSortNum="true"
          :tableHeight="600"
        />
      </div>
      <FooterFields :footerFields="detailObj" />
    </el-card>
    <reject-dialog
      :dialog-visible="rejectVisible"
      @hide-handler="handleCloseRejectDialog"
      @confirm-submit="handleSubmitAuditNote"
    />
  </div>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import UmyTable from '@/components/UmyTable';
import RejectDialog from '../components/RejectAuditDialog';
import FooterFields from '@/pages/commodity/components/FooterFields';
import { isResponseSuccess } from '@/utils/bizUtils';
export default {
  mixins: [],
  components: {
    UmyTable,
    RejectDialog,
    FooterFields
  },
  data () {
    return {
      tableLoading: false,
      passLoading: false,
      isAudit: false,
      rejectVisible: false,
      baseTableData: [],
      tableColumns: [],
      detailObj: {
        recordNo: '',
        commitStateStr: '',
        pusherName: '',
        pushTime: '',
        pusherDeptName: '',
        pusherAreaName: '',
        reason: ''
      },
      apiObj: {
        // 查询基本信息
        queryCheckStandardInfo: {
          url: ' /sysback/checkStandardAdd/getRecordInfo',
          type: 'get'
        },
        // 审核通过
        auditPassApi: {
          url: '/sysback/product/update/record/auditOkByRecordNo',
          type: 'post'
        },
        // 审核驳回
        auditRejectApi: {
          url: '/sysback/product/update/record/auditFailByRecordNo',
          type: 'post'
        }
      },
      recordNo: ''
    };
  },
  created () {
    const { recordNo, type } = this.$route.query;
    if (type) {
      this.isAudit = true;
    }
    this.recordNo = recordNo;
    this.initTabaleClonum();
    this.handleQueryTableData();
  },
  methods: {
    initTabaleClonum () {
      this.tableColumns = [
        {
          title: '品类',
          align: 'center',
          key: 'categoryPath',
          fixed: 'left'
        },
        {
          title: 'SPU编码',
          align: 'center',
          key: 'spuNo',
          width: 90,
          fixed: 'left'
        },
        {
          title: 'SKU编码',
          align: 'center',
          key: 'skuNo',
          width: 90,
          fixed: 'left'
        },
        {
          title: '商品名称',
          align: 'center',
          key: 'productName'
        },
        {
          title: '规格',
          align: 'center',
          key: 'specDetail',
          render: (h, { row }) => {
            return <span>{ row.specDetail || row.specDetailStr }</span>
          }
        },
        {
          title: '品牌',
          align: 'center',
          key: 'brandName'
        },
        {
          title: '验收时间',
          align: 'center',
          key: 'checkTime',
          required: true
        },
        {
          title: '验收频率',
          align: 'center',
          key: 'checkFrequency',
          required: true,
        }
      ];
    },
    handleQueryTableData () {
      this.tableLoading = true;
      ApiRequest(
        this.apiObj.queryCheckStandardInfo.url,
        this.apiObj.queryCheckStandardInfo.type,
        { recordNo: this.recordNo },
        false
      )
        .then((res) => {
          this.tableLoading = false;
          if (isResponseSuccess(res)) {
            let reData = res.retData;
            this.detailObj = res.retData;
            this.handleFormatTableData(reData);
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    handleFormatTableData (reData) {
      this.baseTableData = [];
      this.initTabaleClonum();
      reData.addedSkuSdVoList.forEach((element, oneIndex) => {
        // 准备一行数据的普通列
        let curRow = {
          productName: element.productName,
          brandName: element.brandName,
          categoryPath: element.categoryPath,
          categoryUuid: element.categoryUuid,
          spuNo: element.spuNo,
          skuNo: element.skuNo,
          checkTime: element.checkTime,
          specDetail: element.specDetail,
          specDetailStr: element.specDetailStr,
          checkFrequency: element.checkFrequency,
          detailList: element.detailList
        };
        // 新建表头。并准备一行数据的动态列
        element.detailList.forEach((item, index) => {
          this.pushItem(oneIndex, curRow, item, index);
        });
        // 将行，添加到展示列表
        this.baseTableData.push(curRow);
      });
    },
    pushItem (oneIndex, curRow, innerEle, index) {
      // 将行内动态列的信息，平铺到行
      curRow['checkCount' + index] = innerEle.checkCount;
      curRow['standardValue' + index] = innerEle.standardValue;
      curRow['upDiffValue' + index] = innerEle.upDiffValue;
      curRow['downDiffValue' + index] = innerEle.downDiffValue;
      curRow['checkMethod' + index] = innerEle.checkMethod;
      curRow['checkItemType' + index] = innerEle.checkItemType; // 1数字5个列可填，2文本3个列可填

      // 表头，遍历第1行的动态列时，才追加到表头
      if (oneIndex === 0) {
        if (innerEle.checkItemType !== '2') {
          this.tableColumns.push({
            title: innerEle.checkItemName,
            required: innerEle.isNeed === '1',
            key: innerEle.checkItemUuid,
            align: 'center',
            children: [
              {
                title: '验收次数',
                align: 'center',
                key: 'checkCount' + index,
              },
              {
                title: '标准值',
                align: 'center',
                key: 'standardValue' + index,
              },
              {
                title: '上差值',
                align: 'center',
                key: 'upDiffValue' + index,
              },
              {
                title: '下差值',
                align: 'center',
                key: 'downDiffValue' + index,
              },
              {
                title: '验收方法',
                align: 'center',
                key: 'checkMethod' + index,
              }
            ]
          });
        } else {
          this.tableColumns.push({
            title: innerEle.checkItemName,
            required: innerEle.isNeed === '1',
            key: innerEle.checkItemUuid,
            align: 'center',
            children: [
              {
                title: '验收次数',
                align: 'center',
                key: 'checkCount' + index,
              },
              {
                title: '标准值',
                align: 'center',
                key: 'standardValue' + index,
              },
              {
                title: '验收方法',
                align: 'center',
                key: 'checkMethod' + index,
              }
            ]
          });
        }
      }
    },
    // 审核通过
    handleApproved () {
      this.passLoading = true;
      ApiRequest(
        this.apiObj.auditPassApi.url,
        this.apiObj.auditPassApi.type,
        { recordNo: this.recordNo },
        false
      )
        .then((res) => {
          this.passLoading = false;
          if (isResponseSuccess(res)) {
            this.$message.success('审核通过');
            this.$router.push({ name: 'chageFromManageList' });
          }
        })
        .catch(() => {
          this.passLoading = false;
        });
    },
    handleRejected () {
      console.log('审核驳回');
      this.rejectVisible = true;
    },
    handleBack () {
      this.$router.go(-1);
    },
    // 关闭审核驳回弹框
    handleCloseRejectDialog () {
      this.rejectVisible = false;
    },
    // 提交审核驳回原因
    handleSubmitAuditNote (auditForm) {
      ApiRequest(
        this.apiObj.auditRejectApi.url,
        this.apiObj.auditRejectApi.type,
        { recordNo: this.recordNo, ...auditForm },
        false
      )
        .then((res) => {
          this.passLoading = false;
          if (isResponseSuccess(res)) {
            this.handleCloseRejectDialog()
            this.$router.push({ name: 'chageFromManageList' });
          }
        })
        .catch(() => {
          this.passLoading = false;
        });
    }
  }
};
</script>
<style lang="less" scoped>
.btn-wrap {
  float: right;
  .import-file {
    display: inline;
  }
}
.card-header {
  .title {
    font-size: 16px;
  }
}
.info-card {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
  font-weight: 400;
  .item {
    margin-right: 30px;
  }
}
</style>
